import Vue from 'vue'
import Router from 'vue-router'
import approvalsRouter from './modules/approvals'
import departmentsRouter from './modules/departments'
import employeesRouter from './modules/employees'
import permissionRouter from './modules/permission'
import attendancesRouter from './modules/attendances'
import salarysRouter from './modules/salarys'
import settingRouter from './modules/setting'
import socialRouter from './modules/social'

Vue.use(Router)
// console.log(Router, 7778888)

// 创建router实例
// 导出

/* Layout */
// 直接加载 layout出现的频率太高了 没必要懒加载了
// 懒加载的意义: 在你匹配到这个路由时 才去加载组件
import Layout from '@/layout'

/**
 * constantRoutes
 * a base page that does not have permission requirements
 * all roles can be accessed
 */
// const NotFound = () => import('@/views/404')
// import NotFound from '@/views/404'
// 这里是将来不需要做权限控制的静态路由规则
export const constantRoutes = [
  // 登录的路由规则
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    // meta: { title: '登录', icon: 'list' }
    hidden: true
  },
  {
    path: '/import',
    component: Layout,
    hidden: true,
    children: [
      {
        path: '',
        name: 'import',
        component: () => import('@/views/import/index')
      }
    ]
  },
  // 这个写法不能单独使用, 必须配合path: '*'
  {
    path: '/404',
    // 懒加载的玩法: 不直接给组件对象, 而是给一个函数(去导入组件)
    component: () => import('@/views/404'),
    hidden: true
  },
  // 这个路由页面用于测试 学习新知识点
  {
    path: '/test',
    component: () => import('@/views/test'),
    hidden: true
    // meta: { title: '测试', icon: 'edit' }
  },

  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [
      {
        path: '/dashboard',
        name: 'Dashboard', // 命名路由
        component: () => import('@/views/dashboard/index'),
        meta: { title: '首页', icon: 'dashboard' }
      }
      // .... 在这里添加路由规则 将来代码无法维护
    ]
  }

  // {
  //   path: '/attendances',
  //   component: Layout,
  //   children: [
  //     {
  //       path: '',
  //       component: () => import('@/views/attendances')
  //     }
  //   ]
  // },

  // 404 page must be placed at the end !!!
  // 临时注释 以后将这个路由规则加到所有规则的最后即可!!
  // { path: '*', redirect: '/404', hidden: true }
]

// 这里是将来需要做权限控制的8个动态路由规则
export const asyncRoutes = [
  departmentsRouter,
  employeesRouter,
  settingRouter,
  permissionRouter,
  socialRouter,
  attendancesRouter,
  salarysRouter,
  approvalsRouter
]

const createRouter = () => {
  return new Router({
    // 路由模式 hash  histroy
    mode: 'history', // 上线时需要后端支持
    // 设置滚动行为: 每次切换组件必须回到顶部
    scrollBehavior: () => ({ y: 0 }),
    // 配置规则
    // 404 规则现在在路由规则的中间 不对的 => 后面会处理!!
    routes: [
      ...constantRoutes
      // ...asyncRoutes
    ]
  })
}

const router = createRouter()

// router.beforeEach()
// 路由前置守卫: 登录访问控制/拦截 登录了才能访问某些页面

// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
// 固定套路: 重置路由规则
export function resetRouter() {
  const newRouter = createRouter() // 基于静态路由规则 重新创建一个路由新实例
  // router = newRouter
  // router.matcher 这个指向当前路由实例的所有匹配规则
  router.matcher = newRouter.matcher // reset router
}

export default router
